<!--
 * @copyright 2025 银杏ERP
 * @author 银杏ERP
 * @version 1.0
 * @license http://www.hhyx.xyz
 * @developer Lhf
-->

<template>
  <div class="sales-dashboard">
    <div class="dashboard-header gradient-header">
      <div class="header-title">
        <h2>销售首页</h2>
        <div class="header-subtitle">欢迎回来，{{ currentUser.name }}</div>
      </div>
      <div class="header-actions">
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          :shortcuts="dateShortcuts"
          @change="handleDateChange"
        />
        <el-button type="primary" @click="refreshData">
          <Icon name="fa fa-refresh" class="icon-margin" />
          刷新
        </el-button>
      </div>
    </div>

    <!-- 快捷操作卡片 -->
    <div class="quick-actions-wrapper">
      <div class="quick-actions">
        <div class="quick-action-item gradient-blue" @click="navigateTo('/sales/create')">
          <Icon name="fa fa-plus-circle" class="quick-action-icon" />
          <span>新建销售订单</span>
        </div>
        <div class="quick-action-item gradient-green" @click="navigateTo('/sales/customer')">
          <Icon name="fa fa-users" class="quick-action-icon" />
          <span>客户管理</span>
        </div>
        <div class="quick-action-item gradient-orange" @click="navigateTo('/sales/product')">
          <Icon name="fa fa-cubes" class="quick-action-icon" />
          <span>产品目录</span>
        </div>
        <div class="quick-action-item gradient-purple" @click="navigateTo('/sales/invoice')">
          <Icon name="fa fa-file-text-o" class="quick-action-icon" />
          <span>销售发票</span>
        </div>
        <div class="quick-action-item gradient-red" @click="navigateTo('/sales/promotion')">
          <Icon name="fa fa-tags" class="quick-action-icon" />
          <span>促销活动</span>
        </div>
      </div>
    </div>

    <div class="dashboard-main">
      <div class="dashboard-left">
        <stats-card-section 
      :stats="salesStats" 
      :time-unit="timeUnit" 
      @time-unit-change="handleTimeUnitChange"
    />
        
        <!-- 销售趋势图 -->
        <el-card class="trend-chart-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <div class="header-left">
                <span class="chart-title">销售趋势分析</span>
                <el-tag size="small" effect="plain" type="info" class="time-tag">
                  {{ formatDateRange(dateRange) }}
                </el-tag>
              </div>
              <div class="header-right">
                <el-radio-group v-model="chartViewType" size="small">
                  <el-radio-button label="amount">销售额</el-radio-button>
                  <el-radio-button label="orders">订单数</el-radio-button>
                  <el-radio-button label="profit">利润</el-radio-button>
                </el-radio-group>
              </div>
            </div>
          </template>
        <sales-trend-chart 
          v-if="!chartsLoading && salesChartData.length > 0"
          :chart-data="salesChartData" 
          :loading="chartsLoading"
            :view-type="chartViewType"
        />
        <div v-else class="loading-placeholder">
          <el-skeleton :rows="10" animated />
        </div>
        </el-card>
        
        <!-- 客户分析 -->
        <el-card class="customer-analysis-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <div class="header-left">
                <span class="chart-title">客户分析</span>
              </div>
              <div class="header-right">
                <el-select v-model="customerAnalysisType" size="small" placeholder="选择分析维度">
                  <el-option label="销售额分布" value="sales" />
                  <el-option label="客户类型" value="type" />
                  <el-option label="区域分布" value="region" />
                </el-select>
              </div>
            </div>
          </template>
          <div class="customer-analysis-content">
            <div class="chart-container">
              <customer-analysis-chart 
                :analysis-type="customerAnalysisType"
                :chart-data="customerChartData"
              />
            </div>
            <div class="analysis-metrics">
              <div class="metric-item">
                <div class="metric-label">客户总数</div>
                <div class="metric-value gradient-text-blue">{{ customerMetrics.totalCount }}</div>
                <div class="metric-change" :class="customerMetrics.newCustomers > 0 ? 'positive' : 'negative'">
                  <Icon :name="customerMetrics.newCustomers > 0 ? 'fa fa-arrow-up' : 'fa fa-arrow-down'" />
                  {{ Math.abs(customerMetrics.newCustomers) }} 新增
                </div>
              </div>
              <div class="metric-item">
                <div class="metric-label">客单价</div>
                <div class="metric-value gradient-text-green">¥{{ customerMetrics.averageOrder }}</div>
                <div class="metric-change" :class="customerMetrics.averageChange > 0 ? 'positive' : 'negative'">
                  <Icon :name="customerMetrics.averageChange > 0 ? 'fa fa-arrow-up' : 'fa fa-arrow-down'" />
                  {{ Math.abs(customerMetrics.averageChange) }}%
                </div>
              </div>
              <div class="metric-item">
                <div class="metric-label">客户满意度</div>
                <div class="metric-value gradient-text-orange">{{ customerMetrics.satisfaction }}%</div>
                <div class="metric-change" :class="customerMetrics.satisfactionChange > 0 ? 'positive' : 'negative'">
                  <Icon :name="customerMetrics.satisfactionChange > 0 ? 'fa fa-arrow-up' : 'fa fa-arrow-down'" />
                  {{ Math.abs(customerMetrics.satisfactionChange) }}%
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </div>
      
      <div class="dashboard-right">
        <!-- 销售排行 -->
        <sales-ranking 
          :ranking-data="rankingData" 
          :ranking-period="rankingPeriod"
          @period-change="handleRankingPeriodChange"
        />
        
        <!-- 销售目标 -->
        <sales-goal-card 
          :goal-data="goalData"
          :period-type="goalPeriodType"
          @period-change="handleGoalPeriodChange"
        />
        
        <!-- 销售团队业绩 -->
        <el-card class="team-performance-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <span class="card-title">销售团队业绩</span>
              <el-button link type="primary" @click="navigateTo('/sales/team')">
                查看全部
              </el-button>
            </div>
          </template>
          <div class="team-performance-list">
            <div v-for="(member, index) in teamPerformance" :key="index" class="team-member">
              <div class="member-info">
                <div class="member-avatar">
                  <el-avatar :size="40" :src="member.avatar">
                    {{ member.name.substring(0, 1) }}
                  </el-avatar>
                </div>
                <div class="member-details">
                  <div class="member-name">{{ member.name }}</div>
                  <div class="member-position">{{ member.position }}</div>
                </div>
              </div>
              <div class="member-stats">
                <div class="performance-progress">
                  <div class="progress-info">
                    <span>{{ formatCurrency(member.sales) }}</span>
                    <span>{{ Math.round(member.completionRate) }}%</span>
                  </div>
                  <el-progress 
                    :percentage="member.completionRate" 
                    :color="getGradientColor(member.completionRate)"
                    :striped="member.completionRate > 90"
                    :striped-flow="member.completionRate > 90"
                  />
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    
    <!-- 销售单列表 -->
    <div class="dashboard-bottom">
      <sales-order-list 
        :orders="recentOrders" 
        :loading="ordersLoading"
        @view-all="navigateToOrderList"
        @search="searchOrders"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import StatsCardSection from './components/StatsCardSection.vue'
import SalesTrendChart from './components/SalesTrendChart.vue'
import SalesGoalCard from './components/SalesGoalCard.vue'
import SalesRanking from './components/SalesRanking.vue'
import SalesOrderList from './components/SalesOrderList.vue'
import CustomerAnalysisChart from './components/CustomerAnalysisChart.vue'
import Icon from '/@/components/icon/index.vue'

const router = useRouter()

// 当前用户信息
const currentUser = reactive({
  name: '销售经理',
  id: '001',
  department: '销售部'
})

// 日期范围
const defaultDateRange = () => {
  const end = new Date()
  const start = new Date()
  start.setDate(end.getDate() - 30)
  return [
    start.toISOString().split('T')[0],
    end.toISOString().split('T')[0]
  ]
}

const dateRange = ref(defaultDateRange())
const dateShortcuts = [
  {
    text: '最近一周',
    value: (() => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [
        start.toISOString().split('T')[0],
        end.toISOString().split('T')[0]
      ]
    })()
  },
  {
    text: '最近一个月',
    value: (() => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [
        start.toISOString().split('T')[0],
        end.toISOString().split('T')[0]
      ]
    })()
  },
  {
    text: '最近三个月',
    value: (() => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [
        start.toISOString().split('T')[0],
        end.toISOString().split('T')[0]
      ]
    })()
  }
]

// 图表和数据加载状态
const chartsLoading = ref(false)
const ordersLoading = ref(false)

// 销售统计数据
interface StatItem {
  value: number
  change: number
  changeType: 'increase' | 'decrease'
}

interface StatsData {
  salesAmount: StatItem
  orderCount: StatItem
  profit: StatItem
  receivedPayment: StatItem
}

const salesStats = ref<StatsData>({
    salesAmount: {
      value: 256789.34,
      change: 12.5,
      changeType: 'increase' // 'increase' 或 'decrease'
    },
    orderCount: {
      value: 356,
      change: 8.2,
      changeType: 'increase'
    },
    profit: {
      value: 89432.56,
      change: 15.3,
      changeType: 'increase'
    },
    receivedPayment: {
      value: 245630.89,
      change: -2.5,
      changeType: 'decrease'
    }
})

// 图表数据
const chartViewType = ref('amount') // 'amount', 'orders', 'profit'
const salesChartData = ref<Array<{date: string; sales: number; profit: number; orders: number}>>([])

// 客户分析
const customerAnalysisType = ref('sales') // 'sales', 'type', 'region'
const customerChartData = ref({
  sales: [
    { name: 'VIP客户', value: 45 },
    { name: '大客户', value: 25 },
    { name: '中型客户', value: 18 },
    { name: '小型客户', value: 12 }
  ],
  type: [
    { name: '企业客户', value: 65 },
    { name: '个人客户', value: 20 },
    { name: '政府机构', value: 10 },
    { name: '其他', value: 5 }
  ],
  region: [
    { name: '华东', value: 35 },
    { name: '华北', value: 25 },
    { name: '华南', value: 20 },
    { name: '西南', value: 10 },
    { name: '西北', value: 5 },
    { name: '东北', value: 5 }
  ]
})

const customerMetrics = ref({
  totalCount: 2356,
  newCustomers: 85,
  averageOrder: 3256.78,
  averageChange: 5.3,
  satisfaction: 94.5,
  satisfactionChange: 2.1
})

// 销售排行
const rankingPeriod = ref<'daily' | 'monthly' | 'quarterly' | 'yearly'>('monthly')
const rankingData = ref([
  { rank: 1, productName: '高级办公椅', salesAmount: 87652.50, quantity: 125, growth: 15 },
  { rank: 2, productName: '人体工学键盘', salesAmount: 58963.25, quantity: 215, growth: 8 },
  { rank: 3, productName: '商务笔记本电脑', salesAmount: 45872.75, quantity: 25, growth: 20 },
  { rank: 4, productName: '智能会议系统', salesAmount: 32541.80, quantity: 12, growth: -5 },
  { rank: 5, productName: '办公文件柜', salesAmount: 29874.60, quantity: 35, growth: 3 },
  { rank: 6, productName: '高清投影仪', salesAmount: 27836.45, quantity: 18, growth: 12 },
  { rank: 7, productName: '电子白板', salesAmount: 24521.30, quantity: 8, growth: 18 }
])

// 销售目标
const goalPeriodType = ref<'weekly' | 'monthly' | 'quarterly' | 'yearly'>('monthly')
const goalData = ref({
  currentValue: 358964.50,
  targetValue: 500000.00,
  progressPercent: 71.8,
  remainingDays: 12,
  totalDays: 30
})

// 销售团队业绩
const teamPerformance = ref([
  { name: '张经理', position: '销售总监', sales: 125000, target: 150000, completionRate: 83.3, avatar: '' },
  { name: '李四', position: '销售经理', sales: 96500, target: 100000, completionRate: 96.5, avatar: '' },
  { name: '王五', position: '高级销售顾问', sales: 78300, target: 80000, completionRate: 97.9, avatar: '' },
  { name: '赵六', position: '销售顾问', sales: 45600, target: 60000, completionRate: 76, avatar: '' }
])

// 销售统计时间单位
const timeUnit = ref<'day' | 'month' | 'quarter'>('month')

// 最近订单
const recentOrders = ref({
  total: 235,
  data: [
    { id: 'SO20230301001', date: '2023-03-01', customerName: '上海星辰科技有限公司', amount: 12563.50, salesperson: '张三', status: 'completed', products: [
      { id: 'P001', name: '高级办公椅', quantity: 10, price: 998.00 },
      { id: 'P002', name: '智能会议系统', quantity: 1, price: 2599.50 }
    ] },
    { id: 'SO20230302002', date: '2023-03-02', customerName: '北京智联信息技术有限公司', amount: 8965.25, salesperson: '李四', status: 'completed', products: [
      { id: 'P003', name: '人体工学键盘', quantity: 15, price: 299.00 },
      { id: 'P004', name: '显示器支架', quantity: 15, price: 189.00 }
    ] },
    { id: 'SO20230302003', date: '2023-03-02', customerName: '广州海天电子有限公司', amount: 15782.75, salesperson: '王五', status: 'pending', products: [
      { id: 'P005', name: '商务笔记本电脑', quantity: 5, price: 2999.00 }
    ] },
    { id: 'SO20230303004', date: '2023-03-03', customerName: '深圳市未来科技有限公司', amount: 6532.80, salesperson: '赵六', status: 'completed', products: [
      { id: 'P006', name: '高清投影仪', quantity: 2, price: 3199.00 }
    ] },
    { id: 'SO20230303005', date: '2023-03-03', customerName: '杭州数字科技有限公司', amount: 9874.60, salesperson: '张三', status: 'pending', products: [
      { id: 'P007', name: '办公文件柜', quantity: 8, price: 799.00 },
      { id: 'P008', name: '会议桌', quantity: 1, price: 3599.00 }
    ] }
  ]
})

// 处理日期变化
const handleDateChange = (val: any) => {
  if (val) {
    loadSalesData()
  }
}

// 处理时间单位变更
const handleTimeUnitChange = (unit: string) => {
  timeUnit.value = unit as any
  loadSalesData()
}

// 处理销售排行周期变更
const handleRankingPeriodChange = (period: string) => {
  rankingPeriod.value = period as any
  loadSalesRanking()
}

// 处理销售目标周期变更
const handleGoalPeriodChange = (period: string) => {
  goalPeriodType.value = period as any
  loadSalesGoal()
}

// 导航到订单列表
const navigateToOrderList = () => {
  router.push('/sales/orders')
}

// 导航到指定页面
const navigateTo = (path: string) => {
  router.push(path)
}

// 搜索订单
const searchOrders = (params: any) => {
  ordersLoading.value = true
  // 实际项目中这里应该调用API
  console.log('搜索订单:', params)
  setTimeout(() => {
    // 模拟搜索结果
    if (params.keyword || params.date) {
      recentOrders.value.data = recentOrders.value.data.filter(order => {
        let match = true
        if (params.keyword) {
          const keyword = params.keyword.toLowerCase()
          match = match && (
            order.id.toLowerCase().includes(keyword) ||
            order.customerName.toLowerCase().includes(keyword) ||
            order.salesperson.toLowerCase().includes(keyword)
          )
        }
        if (params.date) {
          match = match && order.date === params.date
        }
        return match
      })
    }
    ordersLoading.value = false
  }, 500)
}

// 刷新数据
const refreshData = () => {
  loadSalesData()
  loadSalesRanking()
  loadSalesGoal()
  loadRecentOrders()
}

// 加载销售数据
const loadSalesData = () => {
  chartsLoading.value = true
  
  // 实际项目中这里应该调用API
  setTimeout(() => {
    // 模拟图表数据
  const dates = []
    const amountData = []
    const orderData = []
  const profitData = []
  
    const startDate = new Date(dateRange.value[0])
    const endDate = new Date(dateRange.value[1])
  const diffDays = Math.ceil((endDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24))
  
  for (let i = 0; i <= diffDays; i++) {
    const date = new Date(startDate)
    date.setDate(startDate.getDate() + i)
    dates.push(date.toISOString().split('T')[0])
    
    // 生成随机数据
      amountData.push(Math.floor(Math.random() * 10000 + 5000))
      orderData.push(Math.floor(Math.random() * 20 + 10))
    profitData.push(Math.floor(Math.random() * 3000 + 1000))
  }
  
    // 将销售趋势数据转换为适合图表组件的格式
    const chartData = []
    for (let i = 0; i < dates.length; i++) {
      chartData.push({
        date: dates[i],
        sales: amountData[i],
        profit: profitData[i],
        orders: orderData[i]
      })
    }
    
    salesChartData.value = chartData
    
    // 更新统计卡片数据
    salesStats.value = {
      salesAmount: {
        value: amountData.reduce((sum, val) => sum + val, 0),
        change: 12.5,
        changeType: 'increase'
      },
      orderCount: {
        value: orderData.reduce((sum, val) => sum + val, 0),
        change: 8.2,
        changeType: 'increase'
      },
      profit: {
        value: profitData.reduce((sum, val) => sum + val, 0),
        change: 15.3,
        changeType: 'increase'
      },
      receivedPayment: {
        value: amountData.reduce((sum, val) => sum + val, 0) * 0.85, // 模拟收款额
        change: -2.5,
        changeType: 'decrease'
      }
    }
    
    chartsLoading.value = false
  }, 800)
}

// 加载销售排行
const loadSalesRanking = () => {
  // 实际项目中这里应该调用API
  console.log('加载销售排行:', rankingPeriod.value)
  // 使用示例数据，实际项目中应该从后端获取
}

// 加载销售目标
const loadSalesGoal = () => {
  // 实际项目中这里应该调用API
  console.log('加载销售目标:', goalPeriodType.value)
  // 使用示例数据，实际项目中应该从后端获取
}

// 加载最近订单
const loadRecentOrders = () => {
  ordersLoading.value = true
  
  // 实际项目中这里应该调用API
  setTimeout(() => {
    // 使用示例数据，实际项目中应该从后端获取
    ordersLoading.value = false
  }, 600)
}

// 格式化货币
const formatCurrency = (value: number) => {
  return new Intl.NumberFormat('zh-CN', {
    style: 'currency',
    currency: 'CNY',
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  }).format(value)
}

// 格式化日期范围
const formatDateRange = (range: string[]) => {
  if (!range || range.length !== 2) return ''
  return `${range[0]} 至 ${range[1]}`
}

// 获取渐变颜色
const getGradientColor = (percentage: number) => {
  if (percentage > 90) return 'linear-gradient(to right, #56ab2f, #a8e063)'
  if (percentage > 70) return 'linear-gradient(to right, #36D1DC, #5B86E5)'
  if (percentage > 50) return 'linear-gradient(to right, #FF9966, #FF5E62)'
  return 'linear-gradient(to right, #ED213A, #93291E)'
}

// 组件挂载时加载数据
    onMounted(() => {
  refreshData()
})
</script>

<style scoped lang="scss">
.sales-dashboard {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
  
  .dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    
    &.gradient-header {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
    }
    
    .header-title {
      h2 {
        margin: 0 0 5px 0;
        font-size: 24px;
        font-weight: 600;
      }
      
      .header-subtitle {
        font-size: 14px;
        opacity: 0.85;
      }
    }
    
    .header-actions {
      display: flex;
      gap: 10px;
      align-items: center;
    }
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    }
  }
  
  .quick-actions-wrapper {
    margin-bottom: 20px;
    
    .quick-actions {
      display: flex;
      gap: 15px;
      overflow-x: auto;
      padding: 5px;
      
      &::-webkit-scrollbar {
        height: 6px;
      }
      
      &::-webkit-scrollbar-thumb {
        background-color: rgba(144, 147, 153, 0.3);
        border-radius: 3px;
      }
      
      .quick-action-item {
        min-width: 180px;
        height: 80px;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: white;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        flex: 1;
        
        &:hover {
          transform: translateY(-3px);
          box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
        }
        
        .quick-action-icon {
          font-size: 24px;
          margin-bottom: 8px;
        }
        
        span {
          font-weight: 500;
        }
        
        &.gradient-blue {
          background: linear-gradient(120deg, #36D1DC 0%, #5B86E5 100%);
        }
        
        &.gradient-green {
          background: linear-gradient(120deg, #56ab2f 0%, #a8e063 100%);
        }
        
        &.gradient-orange {
          background: linear-gradient(120deg, #FF9966 0%, #FF5E62 100%);
        }
        
        &.gradient-purple {
          background: linear-gradient(120deg, #8E2DE2 0%, #4A00E0 100%);
        }
        
        &.gradient-red {
          background: linear-gradient(120deg, #ED213A 0%, #93291E 100%);
        }
      }
    }
  }
  
  .dashboard-main {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    
    .dashboard-left {
      flex: 2;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    
    .dashboard-right {
      flex: 1;
      min-width: 300px;
      max-width: 450px;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    
    @media (max-width: 1400px) {
      .dashboard-left {
        flex: 3;
      }
      
      .dashboard-right {
        flex: 2;
      }
    }
    
    @media (max-width: 1200px) {
      flex-direction: column;
      
      .dashboard-left, .dashboard-right {
        width: 100%;
        max-width: none;
      }
    }
    
    .trend-chart-card, .customer-analysis-card {
      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .chart-title {
          font-weight: 600;
          font-size: 16px;
        }
        
        .time-tag {
          margin-left: 10px;
        }
      }
      
      .loading-placeholder {
        height: 300px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    
    .customer-analysis-card {
      .customer-analysis-content {
        display: flex;
        
        .chart-container {
          flex: 1;
          height: 220px;
        }
        
        .analysis-metrics {
          width: 200px;
          padding-left: 20px;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          
          .metric-item {
            padding: 10px;
            border-radius: 8px;
            background-color: rgba(245, 247, 250, 0.5);
            transition: all 0.3s;
            
            &:hover {
              background-color: rgba(235, 238, 245, 0.9);
              transform: translateX(-3px);
            }
            
            .metric-label {
              font-size: 12px;
              color: #909399;
              margin-bottom: 5px;
            }
            
            .metric-value {
              font-size: 20px;
              font-weight: 600;
              margin-bottom: 5px;
            }
            
            .metric-change {
              font-size: 12px;
              display: flex;
              align-items: center;
              gap: 5px;
              
              &.positive {
                color: #67C23A;
              }
              
              &.negative {
                color: #F56C6C;
              }
            }
          }
        }
        
        @media (max-width: 992px) {
          .analysis-metrics {
            width: 180px;
          }
        }
        
        @media (max-width: 768px) {
          flex-direction: column;
          
          .chart-container {
            height: 200px;
          }
          
          .analysis-metrics {
            width: 100%;
            padding-left: 0;
            padding-top: 20px;
            flex-direction: row;
            gap: 10px;
            
            .metric-item {
        flex: 1;
            }
          }
        }
      }
    }
    
    .team-performance-card {
      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .card-title {
          font-weight: 600;
          font-size: 16px;
        }
      }
      
      .team-performance-list {
        .team-member {
          padding: 12px 0;
          border-bottom: 1px solid #f0f0f0;
          
          &:last-child {
            border-bottom: none;
          }
          
          .member-info {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
            
            .member-avatar {
              margin-right: 12px;
            }
            
            .member-details {
              .member-name {
                font-weight: 500;
                margin-bottom: 3px;
              }
              
              .member-position {
                font-size: 12px;
                color: #909399;
              }
            }
          }
          
          .member-stats {
            .performance-progress {
              .progress-info {
                display: flex;
                justify-content: space-between;
                font-size: 12px;
                margin-bottom: 5px;
              }
            }
          }
        }
      }
    }
  }
  
  .dashboard-bottom {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  }
  
  // 渐变文本样式
  .gradient-text-blue {
    background: linear-gradient(to right, #36D1DC, #5B86E5);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: #36D1DC; // 降级方案
  }
  
  .gradient-text-green {
    background: linear-gradient(to right, #56ab2f, #a8e063);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: #56ab2f; // 降级方案
  }
  
  .gradient-text-orange {
    background: linear-gradient(to right, #FF9966, #FF5E62);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: #FF9966; // 降级方案
  }
  
  .icon-margin {
    margin-right: 5px;
  }
}

// 添加响应式适配
@media (max-width: 768px) {
  .sales-dashboard {
    padding: 10px;
    
    .dashboard-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 15px;
      
      .header-actions {
        width: 100%;
        flex-wrap: wrap;
      }
    }
    
    .quick-actions-wrapper {
      .quick-actions {
        flex-wrap: wrap;
        
        .quick-action-item {
          min-width: calc(50% - 15px);
        }
      }
    }
  }
}
</style> 